<template>
	<div>
		<!-- 铸坯实绩 -->
		<pol-title title="铸坯实绩"></pol-title>

		<div class="padding-lr border-solid bg-tm radius-sm main-box-height">
			<!-- 搜索框 -->
			<pol-search :form="searchForm" :schema="schema" @search="clickSearch" class="margin-top">
				<template #CardTypeCode>
					<div class="el-input-num cursor" style="position: relative;" @click="selectJJQ">
						<el-input v-model="searchForm.CardTypeCode" placeholder="请选择结晶器浇次" size="large" readonly :suffix-icon="searchForm.CardTypeCode ? '' : 'ArrowDown'" />
						<span @click.stop="searchForm.CardTypeCode = ''" class="close-ico cursor" v-if="searchForm.CardTypeCode">
							<el-icon color="#fff">
								<Close />
							</el-icon>
						</span>
					</div>
				</template>

				<template #btnSlot>
					<div class="margin-top">
						铸坯数量（
						<el-dropdown trigger="click" class="margin-left-sm">
							<span class="el-dropdown-link text-lg flex align-center text-green">
								{{liuVal}}
								<el-icon class="el-icon--right" color="#">
									<arrow-down />
								</el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item @click="liuVal = '所有流'">所有流</el-dropdown-item>
									<el-dropdown-item @click="liuVal = '1流'">1流</el-dropdown-item>
									<el-dropdown-item @click="liuVal = '2流'">2流</el-dropdown-item>
									<el-dropdown-item @click="liuVal = '3流'">3流</el-dropdown-item>
									<el-dropdown-item @click="liuVal = '4流'">4流</el-dropdown-item>
									<el-dropdown-item @click="liuVal = '5流'">5流</el-dropdown-item>
									<el-dropdown-item @click="liuVal = '6流'">6流</el-dropdown-item>
									<el-dropdown-item @click="liuVal = '7流'">7流</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
						）：1080
					</div>
				</template>
			</pol-search>

			<!-- 表格 -->
			<pol-table ref="polTableRef" v-bind="tableOpt" :isPage="true" height="calc(100vh - 340px)">
				<template #cz>
					<span class="text-green cursor" @click="edit">编辑</span>
				</template>
			</pol-table>
		</div>

		<crystallizerPopup ref="crystallizerPopupRef" @rowClick="rowClick"></crystallizerPopup>

		<el-dialog v-model="dialogPlanPopup" title="编辑" width="800" center align-center class="search-light cast-popup">
			<lay-json-schema-form :model="formData" :schema="schema2" :key="formKey"></lay-json-schema-form>
			<div class="flex justify-end padding">
				<el-button class="btn-box padding-lr-xl" size="large">发送实绩</el-button>
				<el-button type="primary" class="btn-bg-blue btn-box padding-lr-xl" size="large">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import crystallizerPopup from './components/crystallizerPopup.vue' //选择结晶器

	const liuVal = ref('所有流')
	const furnaceNumberRef = ref(null)
	//搜素数据
	const searchForm = ref({
		CardTypeCode: '', //
		CardTypeName: '', //
	});

	//搜素配置
	const schema = ref({
		CardTypeCode: {
			label: '结晶器浇次',
			slots: {
				customRender: 'CardTypeCode',
			},
			colProps: {
				md: 6,
			},
		},
		CardTypeName: {
			label: '关键字',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '选择输入关键字搜索',
			},
			colProps: {
				md: 8,
			},
		}
	});

	function clickSearch() {

	}

	const polTableRef = ref(null); //表格ref
	//表格配置
	const columns = ref([
		{ label: '实绩发送', key: 'ItemCode', align: 'center', width: '90px' },
		{ label: '铸坏状态', key: 'ItemName', align: 'center', width: '90px' },
		{ label: '二级坯号', key: 'ItemValue', align: 'center' },
		{ label: '打号状态', key: 'IsDefault', align: 'center' },
		{ label: '计划打号号码', key: 'P_IsSys', align: 'center', width: '130px' },
		{ label: '实际打号号码', key: 'P_IsReadOnly', align: 'center', width: '130px' },
		{ label: '铸流序号', key: 'gangbao', align: 'center' },
		{ label: '铸坯类型', key: 'kaishi', align: 'center' },
		{ label: '铸坯去向', key: 'chongzhi', align: 'center' },
		{ label: '实际铸坯长度', key: 'gangzhong', align: 'center', width: '130px' },
		{ label: '切割时间', key: 'caozhuo', align: 'center', width: '150px' },
		{ label: '断面', key: 'lujin', align: 'center' },
		{ label: '计划重量', key: 'lujin2', align: 'center' },
		{ label: '实际重量', key: 'lujin3', align: 'center' },
		{ label: 'QES结果', key: 'lujin4', align: 'center' },
		{ label: '二级炉次', key: 'lujin5', align: 'center' },
		{ label: '熔炼号', key: 'lujin6', align: 'center' },
		{ label: '操作', key: 'cz', align: 'center', width: '80', slot: true },
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				gangbao: '第1流',
				kaishi: '正常',
				chongzhi: '冷床',
				gangzhong: '0.92',
				caozhuo: '2022/8/23 16:33',
				lujin: '410X530',
				lujin2: '1.56',
				lujin3: '1.56',
				lujin4: '正常坯',
				lujin5: '20220108',
				lujin6: '20220108',
			},

		]
	});

	//选择结晶器
	const crystallizerPopupRef = ref(null)
	const selectJJQ = () => {
		crystallizerPopupRef.value.dialogOpen()
	}

	const rowClick = (row) => {
		searchForm.value.CardTypeCode = row.ItemCode
	}

	//编辑
	const formKey = ref(new Date().getTime())
	const dialogPlanPopup = ref(false)
	const edit = () => {
		dialogPlanPopup.value = true
		setTimeout(()=>{
			formKey.value = new Date().getTime()
		}, 300)
	}

	//表单数据
	
	const formData = ref({
		CardTypeCode: '', //
		CardTypeName: '', //
		CardTypeName3: '',
		CardTypeName4: '',
	});

	//表单配置
	const schema2 = ref({
		CardTypeCode: {
			label: '二级坯号',
			type: 'input',
			props: {
				type: 'input',
				placeholder: '二级坯号',
			},
			colProps: {
				md: 24,
			},
		},
		CardTypeCode2: {
			label: '打号ID号',
			type: 'input',
			props: {
				type: 'input',
				placeholder: '打号ID号',
			},
			colProps: {
				md: 24,
			},
		},
		CardTypeCode3: {
			label: '切割时间',
			type: 'input',
			props: {
				type: 'input',
				placeholder: '切割时间',
			},
			colProps: {
				md: 24,
			},
		},
		CardTypeCode3: {
			label: '铸坯长度',
			type: 'input',
			props: {
				type: 'input',
				placeholder: '铸坯长度',
			},
			colProps: {
				md: 24,
			},
		},
		CardTypeName: {
			label: '铸坯类型',
			type: 'select',
			props: {
				showSearch: true, //开启搜索
				allowClear: true, //是否允许清空
				options: [{
					label: '正常',
					value: '正常',
				},
				{
					label: '可疑',
					value: '可疑',
				},
				{
					label: '头坯',
					value: '头坯',
				},
				{
					label: '尾坯',
					value: '尾坯',
				},
				{
					label: '取样坯',
					value: '取样坯',
				},
				{
					label: '废坯',
					value: '废坯',
				},
				{
					label: 'Unknown',
					value: 'Unknown',
				}],
				placeholder: '请选择铸坯类型',
			},
			colProps: {
				md: 24,
			},
		},
		CardTypeName3: {
			label: '去向',
			type: 'select',
			props: {
				showSearch: true, //开启搜索
				allowClear: true, //是否允许清空
				options: [{
					label: '冷床',
					value: '冷床',
				},
				{
					label: '热送',
					value: '热送',
				}],
				placeholder: '请选择去向',
			},
			colProps: {
				md: 24,
			},
		},
		CardTypeName4: {
			label: '打号状态',
			type: 'select',
			props: {
				showSearch: true, //开启搜索
				allowClear: true, //是否允许清空
				options: [{
						label: '出坯辊道',
						value: '出坯辊道',
					},
					{
						label: '正在打印',
						value: '正在打印',
					},
					{
						label: '打印完成',
						value: '打印完成',
					},
					{
						label: '打印取消',
						value: '打印取消',
					},
					{
						label: 'Unknown',
						value: 'Unknown',
					},
				],
				placeholder: '请选择打号状态',
			},
			colProps: {
				md: 24,
			},
		},
		
		CardTypeName22: {
			label: '描述',
			type: 'textarea',
			props: {
				placeholder: '描述',
			},
			colProps: {
				md: 24,
			},
		},
	});
</script>

<style lang="scss" scoped>
	.close-ico {
		position: absolute;
		right: 16px;
		top: 15px;
		z-index: 2;
	}
</style>